import React from 'react';

import './static/css/order.css';
import {Link} from 'react-router';
import axios from 'axios';
import $ from 'jquery';

class Order extends React.Component{
    constructor(props){
        super(props);
		this.state={
			list:[]
		}
    }
	componentDidMount(){
		var that=this;
        if(sessionStorage.getItem("user_info")){
			$(".orderImg").hide();
			var user_id=JSON.parse(sessionStorage.getItem("user_info"))._id;
			var url="http://127.0.0.1:2000/api/orderContent?userid="+user_id;
			axios.get(url)
            .then(function (res) {
				that.setState({
					list:res.data.result
				})
            })
            .catch(function (error) {
                console.log(error);
            });  
		}
		else{
			$(".orderList").hide();
			$(".orderImg").show();
		}
    }
    render(){
        return(
            <div>
            <div id="header-title">	  
		 	  <h2><span>&lt;</span>订单</h2>
		    </div>
	        <div id="orderContent">
		 	  <div className="orderImg">
		 	  	<img src="Order01.png" />
		 	  	<h3>登录后查看外卖订单</h3>
		 	  	<Link to="/Login">立即登录</Link>
		 	  </div>

			   <div className="orderList">
		 	  	<h3><span>我的订单</span></h3>
				<ul>
		 	  		{this.state.list.map(function(value,key){
				   		return <li key={key}>
		 	  	  	 	<img src={`http://127.0.0.1:2000/${value.product_img}`}/>
		 	  	  	 	<div className="name">
		 	  	  	 	 	<h4>{value.product_title}</h4>
		 	  	  	 	 	<p>{value.add_time}</p>
							<span>总价：￥<i>{value.all_price}</i> 元</span>
		 	  	  	 	 </div>
		 	  	  	 	 <h5 className="status">订单已完成</h5>
		 	  	  	</li>
		 	    
			   })}
			   </ul>
		 		
		 	  </div>
		 </div>
    </div>
        )
    }
        
}

export default Order;